<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="js/avalon.js"></script>
</head>
<body>
	<!--<table>
		<tr ms-repeat-first="firstT">
			<td>一级指标<button ms-on-click="addTarget">新增二级指标</button></td>
			<td>
				<table>
					<tr ms-repeat-second="first.secondT">
						<td>二级指标</td>
						<td>
							<table>
								<tr ms-repeat-three="second.threeT">
									<td>三级指标</td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>-->
	<div  ms-controller="table_Ctr">
		<button ms-on-click="addTarget(target)">增加一级指标</button>
		<div ms-include="tpl"></div>
	</div>
	<noscript id="tpl">
		<table>
			<tr ms-repeat-target="target.child">
				<td>
					{{deepInfo[target.deep]}}<input type="text"/>
					<button ms-on-click="addTarget(target)" >增加{{deepInfo[target.deep+1]}}指标</button>
					<button ms-on-click="$remove" >删除</button>
				</td>
				<td ms-include="tpl"></td>
			</tr>
		</table>
	</noscript>

	<script type="text/javascript"> 
			var table_Ctr = avalon.define("table_Ctr", function(vm) {
				vm.deepInfo  = ["头","一级指标","二级指标","三级指标","四级指标"];
				vm.target = {
					deep:0,
					child: [{
						deep:1,
						child: [{
							deep:2,
							child: []
						}]
					}]
				};
				vm.addTarget = function(target) {
					child = {
						deep:target.deep+1,
						child:[]
					}
					target.child.push(child);
				}
			});
	</script>
</body>
</html>
